.tag {
  --tag-height: #{unit(6)};
  --tag-padding: 0 #{unit(2)};
  --tag-font-size: #{unit(3)};
  --tag-radius: 4px;
  --close-icon-color: currentColor;

  @include flex-center($display: inline-flex);
  height: var(--tag-height);
  padding: var(--tag-padding);
  font-size: var(--tag-font-size);
  background: var(--tag-color);
  border: 1px solid var(--tag-color, var(--secondary-color));
  border-radius: var(--tag-radius);
  transition: 0.3s;

  @each $type in $types {
    @include tag-color-with-state($type);
  }

  .close-icon {
    margin-left: unit(1);
  }
}
